<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="t" %>
<%
	request.setAttribute("path", request.getContextPath());
%>
<!DOCTYPE html>
<html>
<head>
	<title>致-青春 ${category.name } 写新文章</title>
	<link rel="stylesheet" type="text/css" href="${path}/css/base.css" />
	<script type="text/javascript" src="${path}/js/jquery-1.10.2.min.js"></script>
	<link rel="stylesheet" type="text/css" href="${path}/js/CLEditor1_4_3/jquery.cleditor.css" />
	<script type="text/javascript" src="${path}/js/CLEditor1_4_3/jquery.cleditor.min.js"></script>
	
	<script type="text/javascript">
		$(function() {
			$("#mit").cleditor();			
		});
		
		function querySub(id, sid) {
			$.post("categoryList.html",
					{id : id},
					function(data){
						 $('select[name="category"] option[value!="-1"]').remove();  
						 var jsonObj = eval(data);     
		                    for ( var i = 0; i < jsonObj.length; i++) {  
		                        var $option = $('<option>');  
		                        $option.attr('value',jsonObj[i].id);  
		                        if(jsonObj[i].id === sid){  
		                            $option.attr('selected',true);  
		                        }  
		                        $option.text(jsonObj[i].name);  
		                        $('select[name="category"]').append($option);  
		                    }  
					});
		}
	</script>
</head>
<body>
	<div id="container">
		<jsp:include page="/page/common/header.jsp"></jsp:include>
		<div id="kernel" class="center-box">
		<form name='f1' method="post" action="userNewArticle.html">
			<table>
					<tbody><tr>
						<th>标题</th>
						<td>
							<input name="title">
						</td>
					</tr>
					<tr>
						<th>正文</th>
						<td>
							<textarea name="content" id="mit" style="width: 400px; height: 350px;"></textarea> 
						</td>
					</tr>
					<tr>
						<td colspan="2">
							大类：
							<select name="" id="cat1" onchange="querySub(this.value)">
							    <option value="-1">-请选择-</option>
							    <c:forEach items="${categoryList }" var="category">
							    	<option value="${category.id }">${category.name }</option> 
							    </c:forEach>
							</select>
							
							小类：
							<select id="cat2" name="category">
								<option value="-1">-请选择-</option>
								<option value="3">Eclipse</option>
								<option value="4">Struts</option>
								<option value="5">Hibernate</option>
							</select>
							
						</td>
					</tr>
					<tr>
						<td colspan="2">
						 <input type="submit" value="发表"> 
						</td>
					</tr>
				</tbody>
				</table>
		</form>
		</div>
		<jsp:include page="/page/common/footer.jsp"></jsp:include>
	</div>
</body>
</html>